<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>sweetalert2 demo</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <style>
        .layui-iconpicker-body.layui-iconpicker-body-page .hide {
            display: none;
        }
    </style>
</head>

<body>


<div class="layuimini-container">
    <div class="layuimini-main">
        <h2><a href="http://mishengqiang.com/sweetalert2/">sweetalert2 demo</a></h2>
        <hr/>
        <div class="layui-btn-group">
            <button id="ip" class="layui-btn layui-btn-normal">查看外网IP</button>
            <button id="githubUser" class="layui-btn layui-btn-normal">验证GitHub账户</button>
            <button id="bgkImg" class="layui-btn layui-btn-normal">背景图片</button>
            <button id="timerInterval" class="layui-btn layui-btn-normal">倒计时</button>
            <button id="img" class="layui-btn layui-btn-normal">自定义图像</button>
            <button id="link" class="layui-btn layui-btn-normal">分布实例</button>
            <button id="mixin" class="layui-btn layui-btn-normal">进度条</button>
            <button id="file" class="layui-btn layui-btn-normal">文件选择</button>
            <button id="select" class="layui-btn layui-btn-normal">下拉框</button>
            <button id="radio" class="layui-btn layui-btn-normal">单选</button>
            <button id="checkbox" class="layui-btn layui-btn-normal">复选</button>
            <button id="range" class="layui-btn layui-btn-normal">范围</button>
            <button id="parameters" class="layui-btn layui-btn-normal">多个输入</button>
        </div>
    </div>
</div>

<script src="/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<!--<script type="text/javascript" src="/js/sweetalert2.all.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>


<script>
    layui.use(['form', 'table', 'layer', 'laydate'], function () {
        var $ = layui.jquery;

        $('#ip').on('click', function () {
            const ipAPI = 'http://api.ipify.org?format=json';
            Swal.queue([{
                title: '显示你的外网IP',
                confirmButtonText: '查询',
                allowOutsideClick: false,   //是否允许点击外部关闭对话框
                allowEscapeKey: false,   //是否允许按ESC键关闭对话框
                text:
                    '你的公网ip会通过ajax请求返回',
                showLoaderOnConfirm: true,    //设置为true时，按钮被禁用，并显示一个在加载的进度条。该参数用于AJAX请求的情况
                showCancelButton: true,  //显示取消按钮
                preConfirm: function () {
                    return $.ajax({
                        datatype: 'json',
                        url: ipAPI,
                        success: function (obj) {
                            Swal.insertQueueStep({
                                type: 'success',
                                title: '您的IP地址：',
                                text: obj.ip
                            });
                        },
                        error: function () {
                            Swal.insertQueueStep({
                                icon: 'error',
                                title: '无法获取您的IP地址'
                            })
                        }
                    })
                }
            }])
        })

        $('#githubUser').on('click', function () {
            Swal.fire({
                title: '输入 Github 账户',
                input: 'text',
                inputAttributes: {
                    autocapitalize: 'off'
                },
                showCancelButton: true,
                confirmButtonText: 'Look up',
                showLoaderOnConfirm: true,
                preConfirm: (login) => {
                    return fetch(`//api.github.com/users/${login}`)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(response.statusText)
                            }
                            return response.json()
                        })
                        .catch(error => {
                            Swal.showValidationMessage(
                                `Request failed: ${error}`
                            )
                        })
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.value) {
                    Swal.fire({
                        title: `${result.value.login}'s avatar`,
                        imageUrl: result.value.avatar_url
                    })
                }
            })
        })

        $('#bgkImg').on('click', function () {
            Swal.fire({
                title: 'Custom width, padding, background.',
                width: 600,
                padding: '3em',
                background: '#fff url(/asserts/img/trees.png)',
                backdrop: `
    rgba(0,0,123,0.4)
    url("/asserts/img/nyan-cat.gif")
    left top
    no-repeat
  `
            })
        })


        $('#timerInterval').on('click', function () {
            let timerInterval
            Swal.fire({
                title: '自动关闭提醒!',
                html: '将在 <b></b> 毫秒后关闭.',
                timer: 10000,
                timerProgressBar: true,
                onBeforeOpen: () => {
                    Swal.showLoading()
                    timerInterval = setInterval(() => {
                        const content = Swal.getContent()
                        if (content) {
                            const b = content.querySelector('b')
                            if (b) {
                                b.textContent = Swal.getTimerLeft()
                            }
                        }
                    }, 100)
                },
                onClose: () => {
                    clearInterval(timerInterval)
                }
            }).then((result) => {
                /* Read more about handling dismissals below */
                if (result.dismiss === Swal.DismissReason.timer) {
                    console.log('I was closed by the timer')
                }
            })
        })

        $('#img').on('click', function () {
            Swal.fire({
                title: 'Sweet!',
                text: 'Modal with a custom image.',
                imageUrl: 'https://unsplash.it/400/200',
                imageWidth: 400,
                imageHeight: 200,
                imageAlt: 'Custom image',
            })
        })

        $('#mixin').on('click', function () {
            const Toast = Swal.mixin({
                toast: true,
                //position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                onOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            })

            Toast.fire({
                type: 'success',
                title: 'Signed in successfully'
            })
        })

        $('#file').on('click', async function () {
            const {value: file} = await Swal.fire({
                title: 'Select image',
                input: 'file',
                inputAttributes: {
                    accept: 'image/*',
                    'aria-label': 'Upload your profile picture'
                }
            })

            if (file) {
                const reader = new FileReader()
                reader.onload = (e) => {
                    Swal.fire({
                        title: 'Your uploaded picture',
                        imageUrl: e.target.result,
                        imageAlt: 'The uploaded picture'
                    })
                }
                reader.readAsDataURL(file)
            }
        })
        $('#range').on('click', function () {
            Swal.fire({
                title: 'How old are you?',
                type: 'question',
                input: 'range',
                inputAttributes: {
                    min: 8,
                    max: 120,
                    step: 1
                },
                inputValue: 25
            }).then(function (result) {
                //console.info(result.value);
                if (result.value) {
                    Swal.fire({type: 'success', title: `You selected: ${result.value}`})
                }
            })
        })

        $('#radio').on('click', async function () {
            /* inputOptions can be an object or Promise */
            const inputOptions = new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        '#ff0000': 'Red',
                        '#00ff00': 'Green',
                        '#0000ff': 'Blue'
                    })
                }, 1000)
            })

            const {value: color} = await Swal.fire({
                title: 'Select color',
                input: 'radio',
                inputOptions: inputOptions,
                inputValidator: (value) => {
                    if (!value) {
                        return 'You need to choose something!'
                    }
                }
            })


            if (color) {
                Swal.fire({html: `You selected: ${color}`})
            }
        })


        $('#checkbox').on('click', async function () {
            const {value: accept} = await Swal.fire({
                title: 'Terms and conditions',
                input: 'checkbox',
                inputValue: 1,
                inputPlaceholder:
                    'I agree with the terms and conditions',
                confirmButtonText:
                    'Continue<i class="fa fa-arrow-right"></i>',
                inputValidator: (result) => {
                    return result ? result : 'You need to agree with TC';
                }
            })

            if (accept) {
                Swal.fire('You agreed with TC :)')
            }
        })

        $('#parameters').on('click', async function () {
            const {value: formValues} = await Swal.fire({
                title: 'Multiple inputs',
                html:
                    '<input id="swal-input1" class="swal2-input"/>' +
                    '<input id="swal-input2" class="swal2-input"/>',
                focusConfirm: false,
                preConfirm: () => {
                    return [
                        document.getElementById('swal-input1').value,
                        document.getElementById('swal-input2').value
                    ]
                }
            })

            if (formValues) {
                Swal.fire(JSON.stringify(formValues))
            }
        })

        $('#select').on('click', async function () {
            const {value: fruit} = await Swal.fire({
                title: 'Select field validation',
                input: 'select',
                inputOptions: {
                    apples: 'Apples',
                    bananas: 'Bananas',
                    grapes: 'Grapes',
                    oranges: 'Oranges'
                },
                inputPlaceholder: 'Select a fruit',
                showCancelButton: true,
                inputValidator: (value) => {
                    return new Promise((resolve) => {
                        if (value === 'oranges') {
                            resolve()
                        } else {
                            resolve('You need to select oranges :)')
                        }
                    })
                }
            })

            if (fruit) {
                Swal.fire(`You selected: ${fruit}`)
            }
        })

        $('#link').on('click', function () {
            Swal.mixin({
                input: 'text',
                confirmButtonText: 'Next &rarr;',
                showCancelButton: true,
                progressSteps: ['1', '2', '3']
            }).queue([
                {
                    title: 'Question 1',
                    text: 'Chaining swal2 modals is easy'
                },
                'Question 2',
                'Question 3'
            ]).then((result) => {
                if (result.value) {
                    const answers = JSON.stringify(result.value)
                    Swal.fire({
                        title: 'All done!',
                        html: `
        Your answers:
        <pre><code>${answers}</code></pre>
      `,
                        confirmButtonText: 'Lovely!'
                    })
                }
            })
        })

    })
</script>


</body>

</html>
